<template>
  <a-modal
    title="批量导入"
    v-model="show"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visiable="devBindInfoUploadVisiable">

    <div style="width: 100%">

      <div class="option-area">
        <a-upload
          class="upload-area"
          :fileList="fileList"
          :remove="handleRemove"
          :disabled="fileList.length === 1"
          :beforeUpload="beforeUpload">
          <a-button>
            <a-icon type="upload"/>
            选择.xlsx文件
          </a-button>
        </a-upload>
        <div class="button-area">
          <a-button type="primary" @click="downloadTemplate" style="margin-right: .5rem">
            模板下载
          </a-button>
          <a-button
            @click="handleUpload"
            :disabled="fileList.length === 0"
            :loading="uploading">
            {{uploading ? '导入中' : '导入Excel' }}
          </a-button>
        </div>
      </div>
      <a-form :form="form" class="option-area">
        <a-row>
          <a-col :md="12" :sm="24">
            <a-form-item label="推送渠道"
                         :labelCol="{span: 5}"
                         :wrapperCol="{span: 18, offset: 1}">
              <a-select
                mode="default"
                :allowClear="true"
                style="width: 100%"
                show-search
                placeholder="请选择"
                option-filter-prop="children"
                :filter-option="filterOption"
                v-decorator="['msgPushKey',{rules: [{ required: true, message: '必填字段'}]}]">
                <a-select-option key="01">阿里云</a-select-option>
                <a-select-option key="02">信雅达</a-select-option>
                <a-select-option key="03">意锐</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <import-result
        @close="handleClose"
        :importData="importData"
        :errors="errors"
        :times="times"
        :importResultVisible="importResultVisible">
      </import-result>
    </div>

  </a-modal>
</template>

<script>

  import ImportResult from './ImportResult'

  export default {

    components: {ImportResult},

    name: "devBindInfoImport",

    data() {
      return {
        form: this.$form.createForm(this),
        formDataInfo: {},
        fileList: [],
        importData: [],
        times: '',
        errors: [],
        uploading: false,
        importResultVisible: false,

        loading: false
      }
    },

    props: {
      devBindInfoUploadVisiable: {
        default: false
      },
      instId: '',
    },

    computed: {
      show: {
        get: function () {
          return this.devBindInfoUploadVisiable
        },
        set: function () {
        }
      },

    },

    methods: {
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },

      onClose() {
        // this.reset()
        this.fileList = []
        this.$emit('close')
      },

      handleClose() {
        this.importResultVisible = false
      },
      downloadTemplate() {
        this.$download('devBindInfo/downloadTemplate', {}, '语音设备信息导入模板.xlsx')
      },

      handleRemove(file) {
        if (this.uploading) {
          this.$message.warning('文件导入中，请勿删除')
          return
        }
        const index = this.fileList.indexOf(file)
        const newFileList = this.fileList.slice()
        newFileList.splice(index, 1)
        this.fileList = newFileList
      },
      beforeUpload(file) {
        this.fileList = [...this.fileList, file]
        return false
      },
      handleUpload() {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.setInfoFields()
            const {fileList} = this
            // console.log({fileList})
            let msgPushKey = this.formDataInfo.msgPushKey
            const formData = new FormData()
            formData.append('file', fileList[0])
            formData.append('instId', this.instId)
            formData.append('msgPushKey', msgPushKey)
            this.uploading = true
            this.$upload('devBindInfo/import', formData).then((r) => {
              let data = r.data.data
              this.importData = data.data
              this.errors = data.error
              this.times = data.time / 1000
              this.uploading = false
              this.fileList = []
              this.importResultVisible = true
            }).catch((r) => {
              console.error(r)
              this.uploading = false
              this.fileList = []
            })
          }
        })

      },

      setInfoFields() {
        let values = this.form.getFieldsValue(['msgPushKey'])
        if (typeof values !== 'undefined') {
          Object.keys(values).forEach(_key => {
            this.formDataInfo[_key] = values[_key]
          })
        }
      },

    }
  }
</script>

<style lang="less" scoped>
  @import "../../../../../static/less/Common";

  .option-area {
    display: inline-block;
    width: 100%;
    padding: 0 .9rem;
    margin: .5rem 0;

    .upload-area {
      display: inline;
      float: left;
      width: 50%
    }

    .button-area {
      margin-left: 1rem;
      display: inline;
      float: right;
      width: 30%;
    }
  }
</style>




